{"componentChunkName":"component---src-templates-blog-js","path":"/blogs/website-made-from-scratch/","result":{"data":{"markdownRemark":{"html":"<p>That’s right! All code. I redesigned my personal site to include my resume, blogs, and projects.</p>\n<p>Designs made in Adobe XD.</p>\n<p><strong>From Left to Right</strong>: Desktop Design, Code Result</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/ba88693dd8983bcc68756580e8c02611/a8979/wmfs-desktop.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB6ElEQVQoz31Ty46bQBDkmqwfGAO2wawx+AVepPjByzZYkZJoIyt7iHzJ3nLIZZVDviH/zVS6R8ZyolUOpWZ6emqqhm6lKIqKgLIoBMf/oSzL1/M338p+v6/yPEeWZYIjY7fbSdRrqpFrqkHGtZf85dxfUJZRVJn9PrqGISzbhnN/D3c8ltFxHCwWC0nYtyy0Ne0KzTDQNU10dB1qt3uF0rftap2mmIehCMIQOSnZxjHerVYYE3FIOSZstttodTqShMnuWi28aTTQVNUreF+xhsMqzjOEDw9iTmoOhwOSJMHxeMRyuURAufVmIw+4vo+v5zM+n074+PgIixwwCYP3Wa1Cdqs7VSYEW9dJAdmHTuA1XQhWXlsbOPQUrosZXeRNJtJ+g9QzWLliOaPq+/kJnz68Fw5ZdD0P5mAAegpp722ziTEp04iQDyTxmi6xpaL6HfVeT14mLZvWsHr58YLn52+CSWZBgOl8LjEici6SSijaIw+/f/3E05cTKXUQRhGmpHQym0lSViktq0aPLBnCn07h0yZjwoSkmC35RMgHWh0NQbSCR3Wsmsnqb1bKtQr1TpUkMdI0FVl201fUYwn9fUZ+6UGqwWazxna7vfYg59I6EhSeFJ4AgnhtMurpKC9r/vu3E1P+U/sHdQlHBQYH3XIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Adobe XD Desktop Design\"\n        title=\"Adobe XD Desktop Design\"\n        src=\"/static/ba88693dd8983bcc68756580e8c02611/b4ad3/wmfs-desktop.png\"\n        srcset=\"/static/ba88693dd8983bcc68756580e8c02611/8c112/wmfs-desktop.png 270w,\n/static/ba88693dd8983bcc68756580e8c02611/03ec9/wmfs-desktop.png 540w,\n/static/ba88693dd8983bcc68756580e8c02611/b4ad3/wmfs-desktop.png 1080w,\n/static/ba88693dd8983bcc68756580e8c02611/399e3/wmfs-desktop.png 1620w,\n/static/ba88693dd8983bcc68756580e8c02611/a8979/wmfs-desktop.png 2025w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>As I worked on the coding from the designs, the typography continued to feel like it didn't fit. I made some big changes that makes it different from design and I was completely okay with that.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/abae4ee5b0fbfde944bfe995d4e89b1a/6ffd1/wmfs-mobile.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsSAAALEgHS3X78AAAB70lEQVQoz21Sy27aUBDNLi1vbIzzwqaYuPL7eYsfFJMKpcEEFYOAJE0kFpWqVkQhWXbRDYv+QD+4RzhtVJLRlXU1d86Z4zmz8/5vtNvtMAyDIPCDINxEmg//D5T9g+yksCiKdMOgKpW6IJi2TTMMX693Oh08yZrG7O0hecTzRYrSdB3FKcUjuNvtqppWLJcrLLt/eAiWI44DGK81YGgaeIph8qUSyrrb4ChCtkzTFE2DApe0M15Bt5vJZPL5bKGQKxYVVUWnJzACSizbdgj50Ov1Tk+PRZHjeSQxAstxoFwQRb7RAIuCzs/BpmVN5/Nvy+Xdw8PNYgEu5D3P68fxaDz+2O8nkwlYJFneBkOh47qX19ffb2/vVqvV/f0oSTBb3/cx9Pj8/CyO33kee3AgKcoLYNd1B8PheDIBbH5xgYbtTTSazVqdb74VMW2aZQ3Lgswnq1LZuq67hExns8urqyRJTNNMndcMU7ft6OTkbDDwYf7Gv20wfrLGcaqqEkIkSZIlCUnP80mLjIYDaH6Vzb7O5eQt2emSwH3sBl2t4suw7BtBQBEGsfjy9ffy86+fP0pM9dGq50uCMYI7UyjAz91sFluxscpXzHD6abZer+HTC53TgcEVbKhhmji42I6TPtm2TbyAtFpI4qAsXR7EH0Naot/hKUeDAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Adobe XD Mobile Design\"\n        title=\"Adobe XD Mobile Design\"\n        src=\"/static/abae4ee5b0fbfde944bfe995d4e89b1a/b4ad3/wmfs-mobile.png\"\n        srcset=\"/static/abae4ee5b0fbfde944bfe995d4e89b1a/8c112/wmfs-mobile.png 270w,\n/static/abae4ee5b0fbfde944bfe995d4e89b1a/03ec9/wmfs-mobile.png 540w,\n/static/abae4ee5b0fbfde944bfe995d4e89b1a/b4ad3/wmfs-mobile.png 1080w,\n/static/abae4ee5b0fbfde944bfe995d4e89b1a/6ffd1/wmfs-mobile.png 1500w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p><strong>From Left to Right</strong>: Mobile Design, Code Result</p>\n<p>It is <strong>crucial</strong> to make sure your site is responsive, meaning that it renders well on a variety of devices and window or screen sizes. I achieved that by: </p>\n<ul>\n<li>Using media queries in CSS. Here's how it looks:</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"scss\"><pre class=\"language-scss\"><code class=\"language-scss\"><span class=\"token atrule\"><span class=\"token rule\">@media</span> <span class=\"token punctuation\">(</span><span class=\"token property\">min-width</span><span class=\"token punctuation\">:</span> 800px<span class=\"token punctuation\">)</span></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token selector\">.example-class </span><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0 6rem<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>This means that when the viewport has a width of 800px or more, <code class=\"language-text\">.example-class</code> will have that assigned padding.</p>\n<ul>\n<li>\n<p>coding for mobile first (look into Mobile First Design). See the example scss below from my website (look up Sassy CSS and how it differs from CSS). </p>\n<div class=\"gatsby-highlight\" data-language=\"scss\"><pre class=\"language-scss\"><code class=\"language-scss\"><span class=\"token selector\">.article </span><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0 auto<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0 2rem<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">transition</span><span class=\"token punctuation\">:</span> all 1s<span class=\"token punctuation\">;</span>\n  \n  <span class=\"token atrule\"><span class=\"token rule\">@media</span> <span class=\"token punctuation\">(</span><span class=\"token property\">min-width</span><span class=\"token punctuation\">:</span> 800px<span class=\"token punctuation\">)</span></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0 6rem<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token atrule\"><span class=\"token rule\">@media</span> <span class=\"token punctuation\">(</span><span class=\"token property\">min-width</span><span class=\"token punctuation\">:</span> 1224px<span class=\"token punctuation\">)</span></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0 25vw<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>So <code class=\"language-text\">.article</code> has the mobile styling done first, and it doesn't need the explicit media query because I have done the query with the other sizes. I have 3 designs for different viewport sizes:</p>\n<ul>\n<li>min-width > 800px (mobile)</li>\n<li>min-width &#x3C;= 800px &#x26; min-width > 1224px (tablet)</li>\n<li>min-width &#x3C;= 1224px (desktop)</li>\n</ul>\n</li>\n</ul>\n<h1>TECH &#x26; TOOLS</h1>\n<ul>\n<li>HTML, CSS, JS\n(aka the fundamental tech needed for web development)</li>\n<li><a href=\"https://reactjs.org/\">React</a>\n(JavaScript library for building user interfaces)</li>\n<li><a href=\"https://www.gatsbyjs.com/\">GatsbyJS</a>\n(modern web framework for blazing fast websites)</li>\n<li><a href=\"https://www.adobe.com/products/xd.html\">Adobe XD</a>\n(UI/UX prototyping tool)</li>\n<li><a href=\"https://github.com/\">GitHub</a>\n(code hosting platform for version control)</li>\n<li><a href=\"https://pages.github.com/\">GitHub Pages</a>\n(static site hosting service from GitHub repository)</li>\n</ul>\n<p>If you would like to see the code of this website, <a href=\"https://github.com/codeherk/codeherk.github.io/tree/dev\">visit my repo on GitHub. The source code is under the dev branch</a>.</p>\n<p>Let me know what you think!</p>","excerpt":"That’s right! All code. I redesigned my personal site to include my resume, blogs, and projects. Designs made in Adobe XD. From Left to…","fields":{"slug":"/blogs/website-made-from-scratch/"},"frontmatter":{"title":"Website Made From Scratch","layout":"post","date":"2020-10-19","image":{"childImageSharp":{"original":{"src":"/static/website-made-from-scratch-2d928d31c7e37c6d9e9cb43532cefcf7.png"}}}}}},"pageContext":{"slug":"/blogs/website-made-from-scratch/"}},"staticQueryHashes":["1595498745","429448491"]}